<template>
  <div class="content-wrapp">
    <el-form
      :model="formData"
      ref="formData"
      label-width="80px"
      class="demo-formData"
    >
      <el-form-item label="邮箱" prop="emailAddress" label-width="60px">
        <el-input size="small" v-model="formData.emailAddress" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="全部国家" prop="country">
        <el-select size="small" v-model="formData.country" filterable @focus="getCountryList" :loading="selectloading">
          <el-option label="全部国家" value></el-option>
          <el-option v-for="item in countryList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机型号" prop="phoneModel">
        <el-select size="small" v-model="formData.phoneModel" filterable  @focus="getPhoneModelList" :loading="selectloading">
          <el-option label="全部手机型号" value></el-option>
          <template v-for="item in phoneModelList">
            <el-option v-if="item" :key="item" :label="item" :value="item"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="产品型号" prop="productModel">
        <el-select size="small" v-model="formData.productModel" filterable @focus="getProductModelList" :loading="selectloading">
          <el-option label="全部产品型号" value></el-option>
          <template v-for="item in productModelList">
            <el-option v-if="item" :key="item" :label="item" :value="item"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="channel"  label-width="60px">
        <el-select size="small" v-model="formData.channel" placeholder filterable @focus="getChannelList">
          <el-option label="全部渠道" value></el-option>
          <el-option v-for="item in channelList" :key="item" :label="item" :value="item">
            <span style="float: left" v-html="item"></span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="date" label-width="60px">
        <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          @change="dateSelect"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label-width="10px">
        <download
          ref="download"
          :allColumns="columns"
          :title="$route.name + '注册用户信息'"
          @getDataxlsx="getDataxlsx"
          size="small"
        ></download>
      </el-form-item>
    </el-form>
    <el-pagination
      v-if="totalPage"
      background
      layout="prev, pager, next"
      :total="totalPage"
      :page-size="formData.pageSize"
      :current-page.sync="currentPage"
      @current-change="_page"
      style="float: right;margin-top: 5px;"
    ></el-pagination>
    <el-table
      ref="table"
      :data="tableData"
      :header-cell-style="getRowClass"
      style="width: 100%;margin-top:20px;"
      border
      v-loading="loading"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="country" label="国家"></el-table-column>
      <el-table-column prop="emailAddress" label="邮箱"></el-table-column>
      <el-table-column prop="phoneModel" label="手机型号">
        <template slot="header" slot-scope="scope"></template>
      </el-table-column>
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="productModel" label="产品型号">
        <template slot-scope="scope">
          <el-link
            :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModel"
          >{{scope.row.productModel}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="channel" label="渠道"></el-table-column>
      <el-table-column prop="registerTime" width="220" label="注册日期">
        <template slot-scope="scope">{{scope.row.registerTime | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="subscribe" width="220" label="是否订阅">
        <template slot-scope="scope">{{scope.row.subscribe?'是':'否'}}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="totalPage"
      background
      layout="prev, pager, next"
      :total="totalPage"
      :current-page.sync="currentPage"
      @current-change="_page"
      :page-size="formData.pageSize"
      style="float: right;margin-top: 5px;"
    ></el-pagination>
    <scrollTable ref="scrollTable"></scrollTable>
  </div>
</template> 

<script>
const ERR_OK = 200;
import { formatDate } from "assets/js/date";
import download from "components/xlsx/xlsx";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      loading: true,
      currentPage: 1,
      totalPage: "",
      tHeader: [
        "序号",
        "姓名",
        "国家",
        "邮箱",
        "电话",
        "订单号",
        "产品型号",
        "渠道",
        "注册日期",
        "是否订阅"
      ],
      date: [],
      tableData: [],
      columns: [],
      countryList: [],
      phoneModelList: [],
      productModelList: [],
      channelList: [],
      formData: {
        channel: "",
        country: "",
        emailAddress: "",
        pageSize: 20,
        phoneModel: "",
        productModel: "",
        endDate: "",
        startDate: ""
      },
      selectloading:false
    };
  },
  created() {
    this.selectTermByPage();
    this.getChannelList();
  },
  mounted() {
    this.columns = JSON.parse(JSON.stringify(this.$refs.table.columns));
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  methods: {
    //获取国家
    getCountryList() {
      this.selectloading = true
      this.$ajax
        .get(
          this.GLOBAL.warrantyService +
            "/register/getCountryList?businessName=" +
            this.$route.name.substring(0,2)
        )
        .then(res => {
          this.selectloading = false
          if (res.data.code === ERR_OK) {
            this.countryList = res.data.data;
          }
        });
    },
    //获取手机型号
    getPhoneModelList() {
      this.selectloading = true
      this.$ajax
        .get(
          this.GLOBAL.warrantyService +
            "/register/getPhoneModelList?businessName=" +
            this.$route.name.substring(0,2)
        )
        .then(res => {
          this.selectloading = false
          if (res.data.code === ERR_OK) {
            this.phoneModelList = res.data.data;
          }
        });
    },
    //获取产品型号
    getProductModelList() {
      this.selectloading = true
      this.$ajax
        .get(
          this.GLOBAL.warrantyService +
            "/register/getProductModelList?businessName=" +
            this.$route.name.substring(0,2)
        )
        .then(res => {
          this.selectloading = false
          if (res.data.code === ERR_OK) {
            this.productModelList = res.data.data;
          }
        });
    },
    //获取渠道
    getChannelList() {
      this.selectloading = true
      this.$ajax
        .get(
          this.GLOBAL.warrantyService +
            "/register/getChannelList?businessName=" +
            this.$route.name.substring(0,2)
        )
        .then(res => {
          this.selectloading = false
          if (res.data.code === ERR_OK) {
            this.channelList = res.data.data;
          }
        });
    },
    // 获取列表数据
    selectTermByPage() {
      this.loading = true;
      let data = [];
      this.tableData = [];
      this.formData.currentPage = this.currentPage;
      this.formData.businessName = this.$route.name.substring(0,2);
      this.$ajax({
        method: "post",
        url: this.GLOBAL.warrantyService + "/register/selectTermByPage",
        data: this.formData
      }).then(res => {
        this.loading = false;
        if (res.data.code === ERR_OK) {
          this.tableData = res.data.data;
          this.totalPage = res.data.etxra;
          this.$refs.scrollTable.scrollShow(this.$refs.table);
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
    dateSelect(date) {
      if (date) {
        this.formData.startDate = date[0];
        this.formData.endDate = date[1];
      } else {
        this.formData.startDate = "";
        this.formData.endDate = "";
      }
    },
    _page(i) {
      this.currentPage = i;
      this.selectTermByPage();
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    },
    getDataxlsx() {
      let formDatas = JSON.parse(JSON.stringify(this.formData));
      formDatas.businessName = this.$route.name.substring(0,2);
      formDatas.pageSize = 1000000;
      this.$ajax({
        method: "post",
        url: this.GLOBAL.warrantyService + "/register/selectTermByPage",
        data: formDatas
      }).then(res => {
        if (res.data.code === ERR_OK) {
          let data = res.data.data;
          // 日期过滤
          for (let i in data) {
            if (data[i].registerTime) {
              let date = new Date(data[i].registerTime);
              data[i].registerTime = formatDate(date, "yyyy-MM-dd hh:mm");
            }
            data[i].subscribe = data[i].subscribe ? "是" : "否";
          }
          this.$refs.download.getDataXlsx(data);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }
  },
  watch: {
    formData: {
      handler(curVal, oldVal) {
        this.currentPage = 1;
        this.selectTermByPage();
      },
      deep: true
    }
  },
  components: {
    download,
    scrollTable
  }
};
</script>

 <style lang="stylus" scoped>
 .el-form-item {
   display: inline-block;
   margin-bottom 10px
 }
 .el-select {
    max-width: 200px;
 }
 .el-date-editor{
     max-width: 243px;
 }
</style>
 